<template>
  <div class="root">
    <div class="root_header">
      <div class="header_bg">
        <!-- 左边 -->
        <div class="plhead_fl">
          <img :src="this.img_list.coverImgUrl" alt="" />
          <span class="lsthd">歌单</span>
          <div class="box">
            <van-icon class=" icon_a" name="service-o" />
            <span class="remd_num"> {{ img_list.playCount | get_num }}</span>
          </div>
        </div>
        <!-- 右边 -->
        <div class="plhead_fr">
          <h2 class="title">{{ img_list.name }}</h2>
          <div class="title_auth">
            <div class="avatar">
              <img :src="creator.avatarUrl" alt="" />
              <div class="ss"></div>
              <div>{{ creator.nickname }}</div>
            </div>
          </div>
        </div>
        <div
          class="plhead_ff"
          :style="{
            backgroundImage: `url(${this.img_list.coverImgUrl || ''})`,
          }"
        ></div>
      </div>
    </div>

    <div class="header_bh">
      <div class="lstit_tags">
        <p>标签:</p>
        <div class="label" v-for="(item, index) in data" :key="index">
          {{ item }}
        </div>
      </div>

      <div class="f_brk">
        <span class="conter">
          <!-- {{ img_list.description }} -->
          简介:<span>{{ img_list.description }} </span>
          <br />
        </span>
      </div>
      <div class="bk">
        <img src="../../assets/01.png" alt="" />
      </div>
    </div>

    <!-- 歌曲列表 -->
    <div class="pylst_list" v-show="song.length > 0">
      <h3>歌曲列表</h3>
      <song
        v-for="(item, index) in song"
        :key="index"
        :id_list="id_list"
        :ids="index"
        :song_data="{
          song_index: index + 1,
          song_name: item.name,
          song_ar: item.ar,
          song_people: item.al.name,
          id: item.id,
        }"
      ></song>
    </div>

    <!-- 评论 -->
    <div class="list_view">
      <h4>热门评论</h4>
      <commit
        v-for="(item, index) in users"
        :key="index"
        :commit_data="{
          avatarUrl: item.user.avatarUrl,
          nickname: item.user.nickname,
          time: item.time,
          likedCount: item.likedCount,
          content: item.content,
        }"
      ></commit>
    </div>

    <!-- 评论 -->
    <div class="list_view">
      <h4>精彩评论</h4>
      <commit
        v-for="(item, index) in user"
        :key="index"
        :commit_data="{
          avatarUrl: item.user.avatarUrl,
          nickname: item.user.nickname,
          time: item.time,
          likedCount: item.likedCount,
          content: item.content,
        }"
      ></commit>
    </div>

    <transition name="fade">
      <!-- 根据仓库内 song_info 是否有id 来表示用户是都点击了某一个 song.vue 组件进行播放 -->
      <playerbar
        v-show="song_info.id"
        @prev="prev_song"
        @next="next_song"
        @click.native="change_playpage_show"
      ></playerbar>
    </transition>

    <transition name="fade">
      <myaudio
        @prev="prev_song"
        @next="next_song"
        v-show="show_playpage"
        @close="show_playpage = false"
      ></myaudio>
    </transition>
  </div>
</template>

<script>
import playerbar from "../../components/playerBar";
import myaudio from "../../components/myaudio";
import { mapState } from "vuex";
import { get_playlist, get_comment } from "../../api/recommend";
import song from "../../components/song";
import commit from "../../components/commit";
export default {
  data() {
    return {
      img_list: [],
      data: [],
      song: [],
      creator: [],
      user: [],
      users: [],
      show_playpage: false,
    };
  },
  filters: {
    get_num(num) {
      let new_num = num / 10000;
      if (new_num > 10000) {
        new_num = new_num / 10000;
        return new_num.toFixed(1) + "亿";
      }
      return new_num.toFixed(1) + "万";
    },
    minute(num) {
      var min = Math.floor((num / 60) % 60);
      return min;
    },
  },

  created() {
    get_playlist(this.$route.query.id).then((res) => {
      console.log(res);
      this.img_list = res.data.playlist;
      this.song = res.data.playlist.tracks;
      this.data = res.data.playlist.tags;
      this.creator = res.data.playlist.creator;
    });

    // 评论
    get_comment(this.$route.query.id).then((res) => {
      console.log(res);
      this.user = res.data.comments;
      this.users = res.data.hotComments;
    });
  },
  components: {
    song,
    commit,
    playerbar,
    myaudio,
  },
  computed: {
    ...mapState(["song_info", "song_idx", "play_list"]),
    a() {
      return !this.img_list.description
        ? []
        : this.img_list.description.split("\n\n");
    },
    // 使用计算属性筛选出新歌榜所以id的集合
    id_list() {
      return this.song.map((el) => el.id);
    },
  },
  methods: {
    change_playpage_show() {
      this.show_playpage = true;
    },
    prev_song() {
      let new_idx;
      if (this.song_idx == 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(prev_id);
    },

    next_song() {
      let new_idx;
      if (this.song_idx == this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }
      let next_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(next_id);
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
  transform: translateY(100%);
  opacity: 0.5;
}

/* 为进场过程和离场过程 设置transition 属性 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.root {
  box-sizing: border-box;
  background-color: #f8f8f8;
  overflow: hidden;
  .root_header {
    .header_bg {
      height: 200px;
      display: flex;
      padding: 30px 10px 30px 15px;
      position: relative;
      overflow: hidden;
      .plhead_fl {
        position: relative;
        z-index: 555;
        .lsthd {
          position: absolute;
          z-index: 3;
          top: 10px;
          left: 0;
          padding: 0 8px;
          height: 17px;
          color: #fefefe;
          font-size: 9px;
          text-align: center;
          line-height: 17px;
          background-color: rgba(217, 48, 48, 0.8);
          border-top-right-radius: 17px;
          border-bottom-right-radius: 17px;
        }
        .box {
          position: absolute;
          right: 1px;
          top: 2px;
          z-index: 3;
          color: #fff;
          .icon_a {
            font-size: 12px;
          }
          .remd_num {
            font-size: 11px;
          }
        }
        img {
          width: 145px;
          height: 145px;
        }
      }
      .plhead_fr {
        margin-left: 16px;
        color: #fefefe;
        z-index: 555;
        opacity: 0.7;
        .title {
          padding-top: 1px;
          font-size: 17px;
          line-height: 1.3;
          text-align: left;
          height: 44px;
        }
        .title_auth {
          margin-top: 20px;
          text-align: left;
          position: relative;
          .avatar {
            font-size: 15px;
            display: flex;
            align-self: center;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 5px;
            }
            .ss {
              display: inline-block;
              position: absolute;
              bottom: -2px;
              left: 15px;
              z-index: 200;
              background: url(../../assets/usericn_3x.png) no-repeat;
              background-position: -34px 0;
              background-size: cover;
              width: 14px;
              height: 15px;
            }
          }
        }
      }
      .plhead_ff {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        right: 88px;
        bottom: 0;
        background-size: cover;
        background-position: 50%;
        filter: blur(20px);
        transform: scale(1.5);
        box-sizing: border-box;
      }
      .plhead_ff:after {
        content: " ";
        background-color: rgba(0, 0, 0, 0.25);
      }
    }
  }

  .header_bh {
    margin: 0 10px 0 15px;
    padding-top: 10px;
    line-height: 19px;
    color: #666;
    font-size: 12px;
    text-align: left;

    .lstit_tags {
      display: flex;
      margin-bottom: 10px;
      .label {
        margin-right: 5px;
        padding: 1px 8px;
        font-size: 12px;
      }
    }

    .f_brk {
      text-align: left;
      height: 70px;
      overflow: hidden;

      display: flex;
      text-overflow: ellipsis;
      .conter {
        font-size: 14px;
        line-height: 23px;
      }
    }
    .bk {
      text-align: right;
      padding-top: 10px;
      img {
        width: 15px;
        height: 8px;
      }
    }
  }
  .pylst_list {
    text-align: left;
    padding-bottom: 20px;
    h3 {
      height: 23px;
      line-height: 23px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
      background-color: #eeeff0;
    }
  }

  .list_view {
    text-align: left;
    h4 {
      height: 23px;
      line-height: 23px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
      background-color: #eeeff0;
      margin-bottom: 10px;
    }
  }
}
</style>
